<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>

<body>
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">加密测试</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">加密前内容</label>
                            <div class="layui-input-block">
                                <input type="text" id="unLockInfo" autocomplete="off" placeholder="请输入要加密的内容"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="lock1">立即加密</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">加密后内容</label>
                            <div class="layui-input-block">
                                <textarea placeholder="" class="layui-textarea" id="lockInfo"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">解密测试</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">加密后内容</label>
                            <div class="layui-input-block">
                                <input type="text" id="lockInfo2" autocomplete="off" placeholder="请输入要解密的内容"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="unLock1">立即解密</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">解密后内容</label>
                            <div class="layui-input-block">
                                <textarea placeholder="" class="layui-textarea" id="unLockInfo2"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">后端交互加解密</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">要加密内容</label>
                            <div class="layui-input-block">
                                <input type="text" id="unLockInfo3" autocomplete="off" placeholder="请输入内容"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="lock2">进行加密</button>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">加密后内容</label>
                            <div class="layui-input-block">
                                <textarea placeholder="" class="layui-textarea" id="lockInfo3"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="send">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">后端返回</label>
                            <div class="layui-input-block">
                                <textarea placeholder="" class="layui-textarea" id="lockInfo4"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="unLock2">进行解密</button>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">解密后内容</label>
                            <div class="layui-input-block">
                                <textarea placeholder="" class="layui-textarea" id="unLockInfo4"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        layui.use(['form', 'layedit', 'laydate', 'layer'], function () {
            var table = layui.table,
                form = layui.form,
                laydate = layui.laydate,
                layer = layui.layer;
            var $ = layui.jquery;
            var key = 'gyrj0206srit0608'; // 密钥 长度16
            var iv = '1234567890gyrjnb'; // 偏移量 长度16

            //左上角的加密功能
            form.on("submit(lock1)", function (data) {
                var unLockInfo = $("#unLockInfo").val();
                var encrypted = encodeAesString(unLockInfo, key, iv);
                $("#lockInfo").val(encrypted);
            });

            //右上角的解密功能
            form.on("submit(unLock1)", function (data) {
                var lockInfo2 = $("#lockInfo2").val();
                var decryptedStr = decodeAesString(lockInfo2, key, iv);
                $("#unLockInfo2").val(decryptedStr);
            });

            //下方的加密功能
            form.on("submit(lock2)", function (data) {
                var unLockInfo3 = $("#unLockInfo3").val();
                var encrypted = encodeAesString(unLockInfo3, key, iv);
                $("#lockInfo3").val(encrypted);
            });

            //下方的发送功能
            form.on("submit(send)", function (data) {
                var lockInfo3 = $("#lockInfo3").val();
                $.ajax({
                    async: true,
                    url: "http://localhost:8080/api/decrypt",
                    type: "post",
                    dataType: "json",
                    data: {
                        content: lockInfo3
                    },
                    success: function (data) { //这里的success指成功接收后台返回的数据
                        if (data.result) { //如果data.result为true
                            layer.msg(data.info); //弹出data.info里面包含的内容提示
                            $("#lockInfo4").val(data.obj);
                        } else {
                            layer.msg(data.info); //弹出data.info里面包含的内容提示
                        }
                    }
                });
            });

            //下方的解密功能
            form.on("submit(unLock2)", function (data) {
                var lockInfo4 = $("#lockInfo4").val();
                var decryptedStr = decodeAesString(lockInfo4, key, iv);
                $("#unLockInfo4").val(decryptedStr);
            });

        });

        //加密功能
        function encodeAesString(data, key, iv) {
            var key = CryptoJS.enc.Utf8.parse(key);
            var iv = CryptoJS.enc.Utf8.parse(iv);
            var encrypted = CryptoJS.AES.encrypt(data, key, {
                iv: iv,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            });
            return encrypted;
        }

        // 解密功能
        function decodeAesString(encrypted, key, iv) {
            var key = CryptoJS.enc.Utf8.parse(key);
            var iv = CryptoJS.enc.Utf8.parse(iv);
            var decrypted = CryptoJS.AES.decrypt(encrypted, key, {
                iv: iv,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            });
            return decrypted.toString(CryptoJS.enc.Utf8);
        }
    </script>
    <script src="js/aes.js"></script>
    <script src="js/crypto-js.js"></script>
</body>

</html>